<template>
  <div class="main_box" style="padding:10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ dataInfo.nickName }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info1">
          <el-row class="header-info">
            <el-col class="header-img__wrapper">
              <div>
                <el-image fit="cover" style="width: 170px;" :src="dataInfo.avatar" :preview-src-list="[dataInfo.avatar]"></el-image>
              </div>
            </el-col>
            <el-col class="text-info">
              <el-col>
                <el-col>客户编号:</el-col>
                <el-col>{{ dataInfo.userCode }}</el-col>
              </el-col>
              <el-col>
                <el-col>客户级别:</el-col>
                <el-col>{{ formatCustomerLevels(dataInfo.customerLevels) }}</el-col>
              </el-col>
              <el-col>
                <el-col>登录账号:</el-col>
                <el-col>{{ dataInfo.userName }}</el-col>
              </el-col>
              <el-col>
                <el-col>手机号:</el-col>
                <el-col>
                  {{ dataInfo.phone }}
                </el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="基本信息" name="userInfo">
          <el-form>
            <el-row>
              <el-form-item label="真实姓名:">
              <span>{{ dataInfo.fullName }}</span>
            </el-form-item>
            <el-form-item label="性别:">
              <span>{{ dataInfo.sex == 1 ? "男" : "女" }}</span>
            </el-form-item>
            <el-form-item label="邮箱:">
              <span>{{ dataInfo.email }}</span>
            </el-form-item>
            <el-form-item label="信用:">
              <span>{{ dataInfo.credit }}</span>
            </el-form-item>
            <el-form-item label="积分:">
              <span>{{ dataInfo.healthPoints }}</span>
            </el-form-item>
            <el-form-item label="简介:">
              <span>{{ dataInfo.userIntroduce }}</span>
            </el-form-item>
            <el-form-item label="状态:">
              <el-tag size="mini" effect="dark" :type="formatStates(dataInfo.state)">
								{{ formatState(dataInfo.state) }}
							</el-tag>
            </el-form-item>
            <el-form-item label="创建人:">
              <span>{{ dataInfo.createUserName }}</span>
            </el-form-item>
            <el-form-item label="修改人:">
              <span>{{ dataInfo.modifyUserName }}</span>
            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{ dataInfo.modifyDate }}</span>
            </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="健康打卡记录" name="openCard">
          <openCard
            :typeName="activeName"
            :userId="dataInfo.userId"
          ></openCard>
        </el-tab-pane>
        <el-tab-pane label="积分变动记录" name="marksChange">
          <marksChange
            :typeName="activeName"
            :userId="dataInfo.userId"
          ></marksChange>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import CustomerApi from '@/api/customer/customer';
  import openCard from '@/components/openCard.vue';
  import marksChange from '@/components/marksChange.vue';

  export default {
    data() {
      return {
        dataInfo: {},
        activeName: this.$route.query.hasOwnProperty("recordType")
        ? this.$route.query.recordType
        : "userInfo"
      };
    },
    components: {
      openCard,
      marksChange
    },
    mounted() {
      this.getData()
    },
    methods: {
      tabClick(tab, event) {
      this.activeName = tab.name;
    },
      getData() {
        CustomerApi.getCustomerInfo({ id: this.$route.query.id }).then(res => {
          this.dataInfo = res.data
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      formatCustomerLevels(cellValue) {
        if (cellValue === 1) {
          return "普通用户";
        } else if (cellValue === 2) {
          return "推广员"
        } else if (cellValue === 3) {
          return "业务员"
        }
      },
      formatState(cellValue) {
        if (cellValue === 0) {
          return "禁用";
        } else if (cellValue === 1) {
          return "启用";
        }
      },
      formatStates(cellValue) {
        if (cellValue === 0) {
          return "warning";
        } else if (cellValue === 1) {
          return "success";
        }
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.back()
      }
    },

  }

  </script>
<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>
<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
